<template>
  <div class="brand">
        <Backbtn></Backbtn>

    <div class="top" :style="{backgroundImage:'url('+list.app_list_pic_url+')'}">
      <h3>{{list.name}}</h3>
    </div>
    <div class="top_info">{{list.simple_desc}}</div>
    <Product :goodsList="goodlist"></Product>
  </div>
</template>

<script>
import { BrandList, goodsList } from "@/request/api";
import Backbtn from "@/components/details/Backbtn.vue";

import Product from "@/components/Home/Product.vue";
export default {
  components: {
    Product,
    Backbtn
  },
  data() {
    return {
      list: [],
      goodlist: []
    };
  },
  created() {
    let data = {
      id: this.$route.params.id
    };
    BrandList(data).then(res => {
      this.list = res.data.brand;
    });
    goodsList({ brandId: data.id, page: 1, size: 1000 }).then(res => {
      this.goodlist = res.data.goodsList;
    });
  }
};
</script>
<style lang="less" scoped>
.brand {
  background: #f4f4f4;
  .back_btn{
    position: absolute;
    background: none;
    left: 0;
    top: 0;
    /deep/.van-icon-arrow-left{
      color: #000;
    }
  }
  .top {
    width: 100%;
    height: 145px;
    background-size: cover;
    background-repeat: no-repeat;
    h3 {
      margin: 0;
      text-align: center;
      color: #fff;
      text-decoration: underline;
      line-height: 145px;
      font-size: 18.5px;
      font-weight: normal;
      filter: brightness(95%);
    }
  }
  .top_info {
    padding: 20px 2%;
    text-align: center;
    font-size: 18px;
    line-height: 26px;
    color: #666;
    background: #fff;
    margin-bottom: 10px;
  }
}
</style>